import Style from './nav.module.less'

const cards = [
  { title: 'WeiLan 工作台', copy: '更能消得泼茶香，闲话家常半两行。', button: '立即前往', url: '/workbench' },
  {
    title: 'WeiLan 官网', copy: '水光潋滟晴方好，山色空蒙雨亦奇。', url: 'https://www.weillan.com',
    entrance: [
      { des: '测试环境', url: 'https://web.weillan.com/' },
      { des: '正式环境', url: 'https://www.weillan.com' }
    ]
  },
  {
    title: 'WeiLan SAAS', copy: '天长地久有时尽，此恨绵绵无绝期。', url: 'https://wl-saas-test.weillan.com',
    entrance: [
      { des: '开发环境', url: 'https://wl-saas-dev.weillan.com' },
      { des: '测试环境', url: 'https://wl-saas-test.weillan.com' }
    ]
  },
  {
    title: 'WeiLan DEMO', copy: '深知身在情长在，怅望江头江水声。', url: 'https://case-test.weillan.com',
    entrance: [
      { des: '开发环境', url: 'https://case-dev.weillan.com' },
      { des: '测试环境', url: 'https://case-test.weillan.com' }
    ]
  },
  { title: 'WeiLan API文档', copy: '故人西辞黄鹤楼，烟花三月下扬州。', button: '立即前往', url: 'https://wl-saas-dev.weillan.com/api/application-portal-app/doc.html' },
  { title: 'WeiLan 云效', copy: '此情可待成追忆，只是当时已惘然。', button: '立即前往', url: 'https://devops.aliyun.com' },
  { title: '南天门', copy: '春花秋月何时了，往事知多少。', button: '立即前往', url: 'http://ntm-admin-devtest.weillan.com' },
]

const Nav = () => {
  return (
    <main className={Style["page-content"]}>
      {
        cards.map(({ title, copy, button, url, entrance }) => (
          <div className={Style.card} key={url}>
            <div className={Style.content}>
              <h2 className={Style.title}>{title}</h2>
              <p className={Style.copy}>{copy}</p>
              {entrance ? (
                entrance.map(({ des, url }) => (
                  <button className={Style.btn} onClick={() => {
                    if (url) { window.open(url) }
                  }}>{des}</button>
                ))
              )
                : (
                  <button className={Style.btn} onClick={() => {
                    if (url) { window.open(url) }
                  }}>{button}</button>
                )}
            </div>
          </div>
        ))
      }
    </main>
  )
}
export default Nav
